<template>
	<div class="j-news">
		<div class="container">
			<ul class="about-icon text-center clearfix">
				<li v-for="(item,index) in iconList" :key="index">
					<router-link :to="item.link" target="_blank">
						<div @mouseover="mouseover(item.id)" @mouseout="mouseout(item.id)">
							<img :src="item.src" alt="">
						</div>
						<div class="about-txt">{{item.name}}</div>
					</router-link>
				</li>
			</ul>
		</div>
	</div>
</template>
<script>
import api from '../../service/api'
export default {
  data () {
    return {
      iconList: [
        {id: 0, src: require('../../assets/icon/index01.png'), name: '脐带血库', link: '/about/pcbb'},
        {id: 1, src: require('../../assets/icon/index02.png'), name: '附属医院', link: '/about/hospital'},
        {id: 2, src: require('../../assets/icon/index03.png'), name: '生命种子', link: '/lifebank/beed'},
        {id: 3, src: require('../../assets/icon/index04.png'), name: '存储方式', link: '/lifebank/storage'},
        {id: 4, src: require('../../assets/icon/index05.png'), name: 'HLA在线配型', link: '/product/cordblood?flag=2'},
        {id: 5, src: require('../../assets/icon/index06.png'), name: '在线培训', link: '##'}
      ]
    }
  },
  methods: {
    mouseover (index) {
      if (index === 0) {
        this.iconList[index].src = require('../../assets/icon/index01-1.png')
      } else if (index === 1) {
        this.iconList[index].src = require('../../assets/icon/index02-1.png')
      } else if (index === 2) {
        this.iconList[index].src = require('../../assets/icon/index03-1.png')
      } else if (index === 3) {
        this.iconList[index].src = require('../../assets/icon/index04-1.png')
      } else if (index === 4) {
        this.iconList[index].src = require('../../assets/icon/index05-1.png')
      } else if (index === 5) {
        this.iconList[index].src = require('../../assets/icon/index06-1.png')
      }
    },
    mouseout (index) {
      if (index === 0) {
        this.iconList[index].src = require('../../assets/icon/index01.png')
      } else if (index === 1) {
        this.iconList[index].src = require('../../assets/icon/index02.png')
      } else if (index === 2) {
        this.iconList[index].src = require('../../assets/icon/index03.png')
      } else if (index === 3) {
        this.iconList[index].src = require('../../assets/icon/index04.png')
      } else if (index === 4) {
        this.iconList[index].src = require('../../assets/icon/index05.png')
      } else if (index === 5) {
        this.iconList[index].src = require('../../assets/icon/index06.png')
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" type="text/scss" lang="scss" scoped>
	/*@import "../../styles/common.css";*/
	.j-news{
		background: #f8f8f8;
		.about-icon{
			margin: 70px 0 0 0;
			li{
				float: left;
				width: 16.666666%;
				padding: 0 15px;
				margin-bottom: 20px;
				a{
					div{
						img{
							max-width: 100%;
							vertical-align: middle;
							margin: 0 auto;
						}
					}
					.about-txt{
						margin-top: 5px;
						font-size: 16px;
						color: #333;
					}
				}
			}
		}
	}
	@media (max-width: 767px){
		.about-icon{
			margin: 30px 0!important;
			li{
				width: 33.333333%!important;
				margin-bottom: 10px;
				.about-txt{
					font-size: 13px!important;
				}
			}
		}
	}
</style>
